<template>
  <el-menu
    :default-active="defaultRoute"
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical"
    text-color="#fff"
    style="height: 100vh"
    :router="true"
    :collapse="isCollapse"
    :unique-opened="true"
  >
    <MenuItem :menuData="menuData" />
  </el-menu>
</template>

<script setup>
import MenuItem from './MenuItem.vue'
import { useRoute } from 'vue-router'
import { computed, ref } from 'vue'
let menuData = ref([
  {
    title: '场馆',
    icon: 'HelpFilled',
    children: [
      {
        title: '场馆',
        index: '/site',
        icon: '',
      },
    ],
  },
  {
    title: '用户手环',
    icon: 'HelpFilled',
    children: [
      {
        title: '用户手环',
        index: '/bracelet',
        icon: '',
      },
    ],
  },
  {
    title: '泳票',
    icon: 'HelpFilled',
    children: [
      {
        title: '泳票',
        index: '/swimTicket',
        icon: '',
      },
    ],
  },
  {
    title: '开放平台',
    icon: 'HelpFilled',
    children: [
      {
        title: '开发者',
        index: '/developer',
        icon: '',
      },
      {
        title: '应用',
        index: '/application',
        icon: '',
      },
      {
        title: '操作记录',
        index: '/appOperationRecord',
        icon: '',
      },
    ],
  },
  {
    title: 'API权限',
    icon: 'Memo',
    children: [
      {
        title: 'API列表',
        index: '/apiList',
        icon: '',
      },
    ],
  },
  {
    title: '系统',
    icon: 'Setting',
    children: [
      {
        title: '角色',
        index: '/roleList',
        icon: '',
      },
      {
        title: '管理员',
        index: '/adminList',
        icon: '',
      },
      {
        title: '系统设置',
        index: '/systemParamSetting',
        icon: '',
      },
      {
        title: '我的设置',
        index: '/mySetting',
        icon: '',
      },
      {
        title: '错误码',
        index: '/systemErrorCode',
        icon: '',
      },
      {
        title: '操作记录',
        index: '/operationRecord',
        icon: '',
      },
    ],
  },
  {
    title: 'test',
    icon: 'user',
    children: [
      {
        title: 'test',
        index: '/test',
        icon: '',
      },
    ],
  },
])
let route = useRoute()
let defaultRoute = computed(() => {
  return route.path
})
let isCollapse = ref(false)
let handleOpen = () => {
  isCollapse.value = false
}
let handleClose = () => {
  isCollapse.value = true
}

defineExpose({
  handleOpen,
  handleClose,
})
</script>

<style scoped>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 110vh;
}
</style>
